<template>
	<view class="content">
		<!-- 健康百科encyclopedia -->
		<view class="article" v-for="item in articleInfo" :key="item.id">
				<view class="a-top">
						<text class="title">{{item.title}}</text>
						<view class="author">
							<text>{{item.author}}</text>
							<text>{{item.creationTime}}</text>
						</view>
					</view>
					<view class="img">
						<image :src="item.image"></image>
					</view>
					<view class="detail">{{item.content}}</view>
				</view>
	</view>
</template>

<script setup>
import { ref, reactive,onMounted} from 'vue'
import {
		onLoad
	} from '@dcloudio/uni-app';
import { encyclopediaApi,articleDetailApi } from '@/api/nucleicAcidApi'
let articleInfo=reactive([])
	
	let	id=ref()
onLoad((options) => {
		console.log(options.id)
	id=options.id
		console.log('文章页面',id)
	})
	onMounted(async () => {
		let res = await articleDetailApi(id)
		if (res.data.code == 0) {
			console.log('成功！')
			console.log(12, res.data.data)
			articleInfo.push(res.data.data)
			
		}
	})
</script>

<style lang="less">
.content {
	margin: 20rpx 30rpx;
	.article {
		display: flex;
		flex-direction: column;
		.a-top {
			.title {
				font-size: 35rpx;
			}
			.author {
				font-size: 25rpx;
				color: #aaaaaa;
				margin: 40rpx 0;
			}
		}
		.img {
			background-color: #e4f0ff;
			border-radius: 10rpx;
			height: 400rpx;
			image{
				width: 100%;
				height: 400rpx;
			}
		}
		.detail {
			margin: 40rpx 0;
			color: #aaaaaa;
			font-size: 30rpx;
		}
	}
}
</style>
